require('../scss/user_index.scss')
import React, {Component, PropTypes} from 'react'
import ReactDOM from 'react-dom'
import "./reducers/toastr.js"

import PersonalHeader from './components/user/Personal/PersonalHeader/PersonalHeader.jsx'
import PersonFooter from './components/user/Personal/PersonFooter/PersonFooter.jsx'
import Container from './components/user/UserIndexContainer/UserIndexContainer.jsx'

var $ = jQuery
$(function(){
    $('a[href*=#],area[href*=#]').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                $('html,body').animate({
                        scrollTop: targetOffset
                    },
                    1000);
                return false;
            }
        }
    });
})

require("imports-loader?$=jquery!../../node_modules/jquery-lazyload/jquery.lazyload.js")

// userData
var logined,username,avatar
var userData = document.getElementById("userData").innerHTML
if(userData.indexOf("NULL") !== -1){
    logined = false
}else{
    logined = true
    userData = JSON.parse(userData)
    username = userData.username
    avatar = userData.avatar
}

// carousels
var carouselsData = JSON.parse(document.getElementById("carousels").innerHTML)

// coursesData
var coursesData = JSON.parse(document.getElementById("courses").innerHTML)

ReactDOM.render(
    <div>
        <PersonalHeader reverse="true" logined={logined} username={username} avatar={avatar}/>
        <Container logined={logined} pictures={carouselsData} courses={coursesData} />
        <PersonFooter/>
    </div>,
    document.querySelector("#main")
)